<template>
	<a-config-provider prefix-cls="ss">
		<!-- 弹框登录 -->
		<ShotstackLoginModal :visible="loginVisible" @onClose="loginVisible = false" @loginCallback="loginCallback" />
		<div class="editing_center" v-if="isLogin && !isProcessing">
			<div class="top_bar">
				<topBar :showSave="true" @backPrevious="backPrevious" />
			</div>
			<div class="main_con">
				<template v-if="modeParams.id != 2">
					<div class="left_menu">
						<leftMenu @currentTab="getCurrentMaterial" />
					</div>
					<div class="right_main">
						<div class="material_con">
							<sourceMaterial :currentMaterial="currentMaterial" />
						</div>

						<div class="right_overview">
							<div class="generate_preview">
								<div class="left_preview">
									<generateVideo />
								</div>
								<div class="right_common">
									<overview @lookAll="handleGo" />
								</div>
							</div>
							<div class="bottom_con">
								<bottomSet v-if="modeParams.id != 5" />
								<imageTextBottom v-else />
							</div>
						</div>
					</div>
				</template>
				<template v-if="modeParams.id == 2">
					<div class="left_material_con">
						<materialCom />
					</div>
					<div class="right_video_set">
						<div class="video_con">
							<videoSynopsis />
						</div>
						<div class="set_con">
							<setCom />
						</div>
					</div>
				</template>
			</div>
		</div>
	</a-config-provider>
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		computed,
		watch,
		toRaw,
		createVNode,
		ref,
		nextTick,
		onMounted,
		onUnmounted,
	} from "vue";
	import utils from "../../../common/utils/utils";
	import leftMenu from "./modules/leftMenu/index.vue";
	import topBar from "./modules/topBar/index.vue";
	import sourceMaterial from "./modules/sourceMaterial/index.vue";
	import bottomSet from "./modules/bottomSet/index.vue";
	// 图文剪辑类型底部设置
	import imageTextBottom from "./modules/bottomSet/imageTextIndex.vue";
	
	import overview from "./modules/overview/index.vue";
	import generateVideo from "./modules/generateVideo/index.vue";
	import materialCom from "./modules/materialCom/index.vue";
	import setCom from "./modules/setCom/index.vue";
	import videoSynopsis from "./modules/videoSynopsis/index.vue";
	import {
		RightOutlined,
		LeftOutlined
	} from "@ant-design/icons-vue";
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		ConfigProvider
	} from 'ant-design-vue';
	import store from "@/store";
	import request from "../../../common/utils/request";
	import {message} from 'ant-design-vue';
	export default defineComponent({
		name: "EditingCenter",
		components: {
			leftMenu,
			topBar,
			sourceMaterial,
			bottomSet,
			overview,
			generateVideo,
			materialCom,
			setCom,
			videoSynopsis,
			imageTextBottom
		},
		setup() {
			// 配置主题色
			ConfigProvider.config({
				prefixCls: "ss",
				theme: {
					primaryColor: "#2878FF",
				},
			});
			
			const router = useRouter();
			const route = useRoute();
			const state = reactive({
				currentMaterial: {},
				modeParams: {
					id: 1,
				},
				loginVisible: false,
				isLogin: false,
				isProcessing: false
			});

			const getClipDetail = async (id) => {
				try {
					const {
						result
					} = await request.get(
						"/work_ai",
						"/user/shotstack/clip/detail", {
							id,
						}
					);
					state.isProcessing = false
					if (result?.resource_data) {
						store.dispatch("SetClipInfo", {
							...result,
							isEdit: true
						});
					}
					if (Array.isArray(result?.response)) {
						let list = []
						if(route.query.edit_model == 5){
							list = result?.image_text_clip
						} else {
							list = result?.response?.filter((i) => i.status === "done");
						}
						setTimeout(() => {
							store.dispatch("SetCrtShowVideoList", list);
							store.dispatch("SetCrtShowVideo", list?.[0] || {});
						}, 50);
					}
				}
				catch(err){
					state.isProcessing = true
					// message.error('剪辑工程已经执行,无法编辑！')
				}
			};
			
			// 编辑模式（1-智能剪辑，2-一键成片，3-模板剪辑，4-脚本剪辑，5-图文剪辑）
			if (route.query.id) {
				store.dispatch("SetClipInfo", {
					id: route.query.id,
					title: route.query.title,
					edit_model: route.query.edit_model,
					aspect_ratio: route.query.aspect_ratio,
					merchant_library_id: route.query.merchant_library_id,
					merchant_folder_statck_id: route.query.merchant_folder_statck_id,
				});
				state.modeParams.id = store.getters.clipJSON.edit_model;
				utils.checkLogin().then((isLogin) => {
					state.isLogin = isLogin;
					if (isLogin) {
						getClipDetail(route.query?.id);
					} else {
						state.loginVisible = true;
					}
				});
			}

			if (route.query.merchant_library_id) {
				store.dispatch("SetLibraryId", route.query.merchant_library_id);
			}

			const getCurrentMaterial = (item) => {
				state.currentMaterial = item;
			};

			onMounted(() => {
				window.addEventListener("beforeunload", (e) => beforeUnloadHandler(e));
				window.addEventListener("unload", (e) => unloadHandler(e));
			});

			onUnmounted(() => {
				window.removeEventListener("beforeunload", (e) => beforeUnloadHandler(e));
				window.removeEventListener("unload", (e) => unloadHandler(e));
			});

			const loginCallback = () => {
				router.go(0);
			};

			const beforeUnloadHandler = (e) => {
				e.returnValue = "确定离开页面吗？";
				return " ";
			};
			const unloadHandler = (e) => {
				e.returnValue = "确定离开页面吗？";
				return " ";
			};

			const backPrevious = () => {
				router.push({
					name: route.query.comeFrom !== 'undefined' ? route.query.comeFrom : 'Home',
					query: {
						tab_key: route.query.edit_model
					}
				});
			};

			const handleGo = () => {
				router.push({
					name: "EditingCenterPreview",
					query: {
						id: store.getters.clipJSON.id,
						edit_model: store.getters.clipJSON?.edit_model
					},
				});
			};

			return {
				...toRefs(state),
				getCurrentMaterial,
				beforeUnloadHandler,
				unloadHandler,
				backPrevious,
				loginCallback,
				handleGo,
			};
		},
	});
</script>

<style lang="less" scoped>
	.editing_center {
		width: 100%;
		height: 100vh;
		background-color: #000;

		.top_bar {
			width: 100%;
			height: 60px;
		}

		.main_con {
			height: calc(100% - 60px);
			display: flex;

			.left_material_con {
				height: calc(100% - 20px);
				width: calc(100% - 520px);
				margin-left: 10px;
				margin-top: 10px;
			}

			.right_video_set {
				width: 500px;
				margin-left: 10px;
				height: calc(100% - 20px);
				margin-top: 10px;

				.video_con {
					width: 100%;
					height: 70%;
				}

				.set_con {
					width: 100%;
					height: calc(30% - 10px);
					margin-top: 10px;
				}
			}

			.left_menu {
				width: 88px;
				height: 100%;
			}

			.right_main {
				width: calc(100% - 88px);
				height: 100%;
				display: flex;

				.material_con {
					width: 318px;
					height: 100%;
				}

				.right_overview {
					width: calc(100% - 325px);
					margin-left: 7px;
					height: calc(100% - 7px);
					margin-top: 7px;

					.generate_preview {
						width: 100%;
						height: 50%;
						display: flex;
						justify-content: space-between;

						.left_preview {
							width: calc(50% - 10px);
							height: 100%;
						}

						.right_common {
							width: 50%;
							height: 100%;
							overflow-y: scroll;

							&::-webkit-scrollbar {
								width: 0px;
							}
						}
					}

					.bottom_con {
						width: 100%;
						height: calc(50% - 7px);
						margin-top: 7px;
					}
				}
			}
		}
	}
</style>